<template>
	<div class="container">
		<div class="header clearfix">
			<div class="header-logo">
				<img src="static/content/images/header/logo.png" alt="">
			</div>
			<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo nav" mode="horizontal" :router="true">
				<el-menu-item v-for="item in items" :key="item.index" :index="item.index" v-if='permissions.indexOf(item.text) > -1'>
				<!-- <el-menu-item v-for="item in items" :key="item.index" :index="item.index"> -->
					<router-link :to="item.index">
					{{item.text}}
					</router-link>
				</el-menu-item>
			</el-menu>
			<!-- 登录 -->
			<el-col class="userinfo">
				<span class="account">账户名：
					<span class="name">{{this.start.UserName}}</span> 
				</span>
				<span class="account2">账套：
					<span class="name">{{this.start.CompanyName}}</span> 
				</span>
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner"><img :src="this.start.HeadPortrait" /></span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item class="user-box clearfix">
							<img :src="this.start.CompanyLogo" alt="">
							<span>{{this.start.CompanyName}}</span>
						</el-dropdown-item>
						<el-dropdown-item divided>
							<i class="icon iconfont icon-yonghu"></i>&#12288;<span style="font-size:14px;">{{this.start.UserName}}</span>
						</el-dropdown-item>
						<el-dropdown-item @click.native="selectOrganize">
							<i class="icon iconfont icon-qiehuan"></i>&#12288;<span style="font-size:14px;">切换账套</span>
						</el-dropdown-item>
						<el-dropdown-item @click.native="editPass">
							<i class="icon iconfont icon-bianji"></i>&#12288;<span style="font-size:14px;">修改密码</span>
						</el-dropdown-item>
						<el-dropdown-item @click.native="logout">
							<i class="icon iconfont icon-tuichu1"></i>&#12288;<span style="font-size:14px;">退出登录</span>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</div>
		<el-dialog title="修改密码" :visible.sync="dialogEditVisible" size="tiny">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="旧密码" prop="oldPass">
			<el-input type="password" v-model="ruleForm.oldPass" auto-complete="no" style="width:80%"></el-input>
			</el-form-item>
			<el-form-item label="新密码" prop="newPass">
			<el-input type="password" v-model="ruleForm.newPass" auto-complete="no" style="width:80%"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="checkPass">
			<el-input type="password" v-model="ruleForm.checkPass" auto-complete="no" style="width:80%"></el-input>
			</el-form-item>
			<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
			<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
import axios from '../util/axios';
import { mapGetters } from 'vuex';
export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
		var validatePass3 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm.newPass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			dialogEditVisible:false,//修改密码
			ruleForm: {
				oldPass: '',
				newPass:'',
				checkPass: '',
			},
			start:{},
			rules: {
				oldPass: [
					{ validator: validatePass, trigger: 'blur' }
				],
				newPass: [
					{ validator: validatePass2, trigger: 'blur' }
				],
				checkPass: [
					{ validator: validatePass3, trigger: 'blur' }
				],
			},
			items: [{
				index: 'Home',
				text: '首页'
			},
			{
				index: 'budgetAdjust',
				text: '预算管理'
			},
			{
				index: 'businessMain',
				text: '业务单据'
			},
			{
				index: 'Entrance',
				text: '出纳'
			},
			{
				index: 'proof',
				text: '总账'
			},
			{
				index: 'Client',
				text: '基础设置'
			},
			{
				index: 'SupplyChain',
				text: '供应链管理'
			}
			],
			activeIndex: '1',
			sysName: 'VUEADMIN',
			companyName: '广州圆智咨询有限责任公司',
			shortName:'',
			collapsed: false,
			defaultLogo:'static/content/images/Header-S.png',//公司默认LOGO
			defaultLogoW:'static/content/images/Header-W.png'//微信默认头像
		}
	}, 
	computed: {
            ...mapGetters({
                permissions: 'permissions'
            })
      },
	methods: {
		//获得开始
		getStart(){
			axios.get('getStartList').then(res=>{
				this.start = res;
			      if(this.start.CompanyLogo===null||this.start.CompanyLogo===''){
					this.start.CompanyLogo = this.defaultLogo;
					
				}
				if(this.start.HeadPortrait===null||this.start.HeadPortrait===''){
					this.start.HeadPortrait = this.defaultLogoW;
				}
			}).catch(err=>{
				console.log(err);
			})
		},
		//修改密码
		editPass(){
			this.dialogEditVisible = true;
		},
		//切换账套
		selectOrganize(){
			this.$router.replace("/Branch");
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
			if (valid) {
				this.$confirm('确认提交吗？','提示',{}).then(() => {
                        let para = { 
					oldPassword:this.ruleForm.oldPass,
					newPassword:this.ruleForm.newPass
				};
				axios.get('ChangePassword',para).then((res)=>{
						console.log(res);
						if(res.Success){
							this.$message({
								message: '修改密码成功！',
								type: 'success',
								duration:1200
							})
							this.dialogEditVisible = false
						}else{
							this.$message({
								message:res.Message,
								type:'error',
								duration:1200
							})
						}
					}).catch(err=>{
						console.log(err);
					})
				})
			} else {
				console.log('error submit!!');
				return false;
			}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		//退出登录
		logout() {
			this.$confirm('确认退出吗?', '提示', {
			}).then(() => {
				axios.get('OutLogin').then(res=>{
					sessionStorage.removeItem('user');
					sessionStorage.removeItem('isLogin');
					this.$router.push('/login');
					
				}).catch(err=>{
					console.log(err);
				})
				
			})
		},

		
	},
	mounted() {
		const user = sessionStorage.getItem('user');
	},
	created () {
		this.getStart();
		/* this.getPermiss(); */
	}
}
</script>

<style scoped lang="scss">
@import '~scss_vars';
.el-dropdown-menu {
	min-width: 250px;
	max-width: 250px;
	.user-box {
		img {
			margin-left: 20px;
			width: 70px;
			height: 70px;
			border-radius: 40px;
			vertical-align: top;
		}
		span {
			display: inline-block;
			width: 120px;
			color: #333;
			margin-left: 15px;
			font-size: 18px;
			height: 70px;
			line-height:70px;
		}
		&~li {
			text-align: center;
			.iconfont {
				font-size: 20px;
				color: #777;
				vertical-align: middle
			}
			&:hover {
				background-color: #3b5b98;
				color:#fff;
				.iconfont{
					color:#fff;
				}
			}
			&~li {
				text-align: center;
				.iconfont {
					font-size: 20px;
					color: #777;
					vertical-align: middle
				}
				&:hover span {
					text-decoration: underline;
				}
			}
		
		}
	}
}

.container {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 100%;
	.header {
		height: 70px;
		line-height: 70px;
		background: $color-primary;
		color: #fff;
		.header-logo {
			width: 220px;
			background-color: #136db1;
			float: left;
			img {
				vertical-align: middle;
				width:100%;
				margin-top:-80px;
			}
		}
		.nav {
			background-color: $color-primary; // margin-right:20vw;
			float: left;
			margin-left: 200px;
			li {
				display: inline-block;
				float: left;
				font-size: 18px;
				color: white;
				height: 70px;
				line-height: 70px;
				&.el-menu-item:hover {
					border-bottom: 4px solid #fbff00;
					background: #304d84;
				}
			}
		}
		.userinfo {
			width: initial;
			text-align: right;
			padding-right: 50px;
			float: right;
			height: 70px;
			line-height: 70px;
			font-size:14px;
			.userinfo-inner {
				cursor: pointer;
				color: #fff;
				font-size:14px;
				img {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					margin: 15px 0px 15px 10px;
					float: right;
				}
			}
			.el-icon-message {
				color: #7b97d4;
				float: left;
				line-height: 70px;
			}
			.account,.account2 {
				color: #7b97d4;
				padding: 0 20px;
				float: left;
				.name {
					color: #fff;
					margin: 0 5px;
				}
			}
			.account{
				height:70px;
				line-height:70px;
			}
			.mailbox {
				margin-left: 10px;
				color: #7b97d4;
				float: left;
			}
			.line {
				margin: 0 10px;
				color: #7b97d4;
				float: left;
			}
		}
		.logo {
			//width:230px;
			height: 60px;
			font-size: 22px;
			padding-left: 20px;
			padding-right: 20px;
			border-color: rgba(238, 241, 146, 0.3);
			border-right-width: 1px;
			border-right-style: solid;
			img {
				width: 40px;
				float: left;
				margin: 10px 10px 10px 18px;
			}
			.txt {
				color: #fff;
			}
		}
		.logo-width {
			width: 230px;
		}
		.logo-collapse-width {
			width: 60px
		}
		.tools {
			padding: 0px 23px;
			width: 14px;
			height: 60px;
			line-height: 60px;
			cursor: pointer;
		}
	}
	.main {
		display: flex; // background: #324057;
		position: absolute;
		top: 60px;
		bottom: 0px;
		overflow: hidden;
		aside {
			flex: 0 0 230px;
			width: 230px;
			.el-menu {
				height: 100%;
			}
			.collapsed {
				width: 60px;
				.item {
					position: relative;
				}
				.submenu {
					position: absolute;
					top: 0px;
					left: 60px;
					z-index: 99999;
					height: auto;
					display: none;
				}
			}
		}
		.menu-collapsed {
			flex: 0 0 60px;
			width: 60px;
		}
		.menu-expanded {
			flex: 0 0 230px;
			width: 230px;
		}
		.content-container {
			flex: 1;
			overflow-y: scroll;
			padding: 20px;
			.breadcrumb-container {
				.title {
					width: 200px;
					float: left;
					color: #475669;
				}
				.breadcrumb-inner {
					float: right;
				}
			}
			.content-wrapper {
				background-color: #fff;
				box-sizing: border-box;
			}
		}
	}
}
</style>